<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>反应速度测试</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="noise-overlay"></div>
    <main class="app-shell">
        <header class="hero">
            <div>
               
                <h1>光环反应速度测试</h1>
                <p class="lede">点击<span>开始测试</span>，等待光环亮起后迅速点击。系统会统计你的平均值、最佳值与最近成绩。</p>
            </div>
        </header>

        <section class="tester">
            <div class="halo" id="halo" tabindex="0" role="button">
                <div class="halo-inner">
                    <p class="halo-status" id="halo-status">准备中</p>
                    <p class="halo-hint">等待颜色变化</p>
                </div>
            </div>
            <div class="actions">
                <button id="start-btn" class="primary">开始测试</button>
                <p id="status-text">看到光环变成亮色时立即点击，以毫秒为单位统计反应时间。</p>
            </div>
        </section>

        <section class="stats-grid">
            <article>
                <p class="label">最新成绩</p>
                <h2 id="last-time">-- ms</h2>
            </article>
            <article>
                <p class="label">平均</p>
                <h2 id="avg-time">-- ms</h2>
            </article>
            <article>
                <p class="label">最佳</p>
                <h2 id="best-time">-- ms</h2>
            </article>
            <article>
                <p class="label">总测试次数</p>
                <h2 id="count-total">0</h2>
            </article>
        </section>

        <section class="history">
            <div>
                <h3>最近记录</h3>
                <ul id="history-list"></ul>
            </div>
            <div>
                <h3>最佳前 5</h3>
                <ul id="top-list"></ul>
            </div>
        </section>
    </main>

    <script>
        window.__INITIAL_STATS__ = {{ initial_stats|tojson }};
    </script>
    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
</body>
</html>
